III. 3 - Estilos de Interaccao 



III - 


Desenho de Sistemas 




Interactivos 


III. 3 


- Estilos de Interaccao 




HCI, Cap. 3, Alan Dix 



Melhor e Pior ? 



; c:\graphicsVclipdit 



File Ivpe: 



_l 





"older: 


Files: 




P^ graphics 


submarin.gif _^J 

suitcase.gif 

surn.gif 

sun.gil 

supplies, gif 

sword.gif , 
lsyringe.gif 
Itank.qit T 




Bc:[tf95U51U] jj| | GIF Files [=.gi(] 



2 95 x 2 17 in 



3 



V.2 - Estilos de Interaccao 



Resumo da Aula Anterior 



• Praticamos Avaliagao Heuristica 

• Consolidamos resultados 



Modelos para Avaliagao Preditiva 

- Modelam Interaccao pessoa-sistema 

- Permitem estimar tempos de interaccao 

- GOMS: Goals, Operators, Methods, Selection 

• Baseado em decomposicao hierarquica 

- KLM: Keystroke Level Model 

• Operacoes atomicas 
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Sumario 



• Estilos de Interacgao 
-Linguagem de Comandos 

- Menus 

- Lingua Natural 

- Pergunta Resposta 

- Formularios 
-Manipulagao Directa 

- Novos Paradigmas 
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Linguagem de Comandos 



• Modo de dar instrugoes ao computador 
directamente 

- Palavras de comando 

- Abreviaturas 

- Teclas de funcao 

• Exemplo: UNIX, MS-DOS 
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Vantagens das LC 



• Potentes 

• Flexfveis, utilizador tern o controlo 

• Boas para tarefas repetitivas 

• Rapidas e eficientes para peritos 

• Uso mfnimo do ecra 
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Desvantagens das LC 


relembrar 


• Diffceis de aprender e de 


- Nomes dos comandos, arg 


jmentos e 


opgoes 




• Viola Heurfstica H2-... 




• Obrigam a utilizagao eficiente do 


teclado 




- is em vez de list 




• (Heuristica: menos teclas = 


menos erros) 


• Melhores para peritos que para novigos 
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Menus 



• Escolha de uma opgao numa lista de opgoes. 



i Microsoft PoweiPoint - [MSWIND2.PPT] 



File Edit View Insert Format Tools Draw Window Help 



m 



TillFn 



Pull-Down 



Pop-up e Cascata 



g|V!e W insert Format lools D, 


Undo Drl+Z 


IIP 


Paste Special... 
SeleclAJI Drl+A 
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rma^ao G 
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Pag in a Web 






- Estilos de Interacgao 



Recomendagoes sobre Menus 



• Estrutura de um menu/WWW 



• Ordenagao das opgoes 



• Selecgao das opgoes 



Navegagao entre menus 
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Estrutura de um menu 



• Largura vs Altura 



Demasiado Larga 

Desorganizasao Jos 
links. DificuMade em 
encontrai infoimi$aD 
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Largura vs Altura (Estrutura) 

















^^ 


P-agmas 
de 

Menu. 










B 








™ 




= 




= 




= 






















™ 




™ 




™ 




™ 






















™ 




™ 




™ 




™ 



Demasiado Profunda 

Menus numerosos e demasiado 

estreitos. 

Serie mfmdaviel de menus. 



P-agrtias 

de 

Conteudos 
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Largura vs Altura (Estrutura) 



Estrutura de menus 
equilibrada 



■ — — ; ■ 



■ ; — — ■ 
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Largura vs Altura (Estrutura) 



• Largura e preferivel a profundidade 

- Profundidade maxima: 3 a 4 
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Ordenagao das Opgdes 


• Alfabetica (Fontes) 


• Posigao Constante (Dias da semana) 


• Frequencia de Utilizagao 


• Funcionalidades opostas afastadas 


(Create/Delete) 


• Aleatoria 


Qualquer das opcoes e melhor que 


a aleatoria 
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Esquemas de Ordenagao 



E5M 

Keyboard X 

Commands 

Piocedures 

Tbols 

Using Help 

About Paintbrush 



Frequencia de Utilizagao 



Ordem de Utilizagao 



Forward 

Print 

Save 

Send 

Distribute 

Copy 

Move 



ODcn ^ 



Categorias 



Open 
Save 

SaveAs 



Page Sclup 
Print 
Print Setun 



Exit 



Basel^^^^^ 



Alfabetica mente 



Basel 
Cairo 
Geneva 

Helvetica 
New %rk 
Times 
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Selecgao das opgoes 



• Criar categorias semanticas 

- com significados claros que sejam logicas, 
distintivas e mutuamente exclusivas 

• Texto breve e consistente gramaticalmente 

-Verbos melhor que nomes 
• Acgao vs descricao 

• Associar descritores as opcoes 

- Realimentacao e ajudas 



- Estilos de Interaccao 



Navegagao entre Menus 


• Suportar "type (or click) ahead" na 


navegagao para peritos 


• Teclas aceleradoras (H2-...) 


• Facilitar o retorno ao nfvel anterior e 


a raiz da arvore 


• Padroes semelhantes para WWW 
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Menus Circulares 




• Melhores 
-0.5s mais rapidos em media 

• Porque ? 

- Lei de Fitts 

• Alvos maiores e a mesma distancia 
-Numero limitado de opcoes (max. 8) 
-Faceis de Seleccionar 
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Lei de Hick 



• Seleccao de opcoes num menu 

• Tempo necessario para seleccionar uma opcao 
e proporcional a quantidade de informacao 

T= klog2(n + l) n - numero de opcoes 

• Decisoes complexas levam mais tempo 

• Implicates 

- Numero optimo de opcoes por menu 
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Vantagens dos Menus 



• Auto-Explicativos 

• Aprendizagem rapida 

• Rapidos para novigos 

• Configuraveis 

• Memoria auxiliada por reconhecimento 
-Nomes escolhidos com cuidado 

• Facil gestao de erros 
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Desvantagens dos Menus 


• Lentos para peritos 


• Escolha dos nomes e critica 


• Inflexibilidade (controlo interno) 


• Numero limitado de opgoes (<20) 


• Utilizagao do ecra 


-Ocupa muito espaco do ecra 
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Lingua Natural 



• Familiar ao utilizador 

• Reconhecimento de fala ou escrita 

• Problemas 

- Vaga 

- Ambigua 

- Dificil fazer bem 

• Solucoes 

- Tentar perceber urn subconjunto 

- Identificar apenas palavras-chave 
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Dialogos Pergunta / Resposta 



• Mecanismo simples para introducao de 
dados numa aplicacao 

• Utilizador responde a uma serie de 
perguntas 

- Sim/Nao, escolha multipla ou codigos 

• Utilizador e guiado passo a passo 

• Exemplo: 

- Diga o seu nome (Ultimo, Primeiro N.): 
Santos, Jose 

- Qual a sua idade?: 25 
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Vantagens das Perg./Resp. 



• Auto-Explicativos 

- o que? - semantica; 

- como? - sintactica 

• Pouca memorizacao 

- Reconhecimento em vez de lembranca 

• Simples e nao intimidante 

• Bom para principiantes 

• Varios tipos de dados de entrada 

• Tarefas com uma estrutura hierarquica 
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Desvantagens das 


Perg./Resp. 


• Pouco eficientes 


• Obrigam a utilizagao 


eficiente do 


teclado 




• Inflexfveis (controlo 


interno) 


• Nao fornecem contexto seguinte 
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Formularios 



I [2 Go-faster Travel Agency Booking 



Conjunto de campos identificados e 

estruturados 

Usados para introducao e recuperagao de 

dados 

Desenho igual a 

formularios em 

papel 

Requerem 

- Bom desenho 

- Facilidades de 
correccao 



Go-faster Travel Agency Booking 

Start from: Lancaster 

Destination: |A1lanta 



« First class /O Set 
O Single / Q Return 
Seat number: |~ 
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Vantagens/ Desv antagens 

+ Pouca memorizagao (reconhecimento) 

+ Utilizagao eficiente do ecra 

+ Varios tipos de dados de entrada 

- Assumem conhecimento sobre tipos de 
dados de entrada 

- Para peritos em introdugao de dados 
por teclado 

- Inflexfveis (controlo interno) 
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Organizacao e Disposicao (layout) 



• Desenhar de modo a suportar a tarefa: 

- Formulario em papel 

• Ordenar grupos de Campos relacionados 
semanticamente por: 

- Sequencia de utilizagao (H2-...) 

- Frequencia de utilizagao 

- Importancia relativa (obrigatorios primeiro) 
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Ordenagao dos Campos 






Morada 


Ordenado 


Distrito : | 






Nljawg : | 




Ru* |~~ 


Cdd^fo postal : | 


Morada 


Pais : | 


FLua | 


Localidads: | 


HGrn^r-a | 




Desordenado 


Locilidade I 


Codigo postal \ 




Distritc | 


Pais | 
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Agrupamento de Campos 



■ . 



Anc kctivo 
1 1999/2000 ^J 






Sern e. 

1° c 


2" r 


Licenciatura 
lErgerhatia Mece 




-I 












Disciplina 


JMecanica dos Fl 


ido 






zi 





mo Sobre Aluncs 
N.° de alunos que comparer 

1 12 

N° de alunc.5 Aprovados 

1 100 



a Provas deAvaliaga.. 
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Formatos dos Dados de Entrada 



• Preenchimento de partes de palavras nao 
ambiguas (prefixos unicos, eg: L[ISTAR]) 

• Usar menus para campos com opcoes pre- 
definidas ("combo boxes") 

• Assinalar campos obrigatorios 

• Simplificar as regras de introducao dos dados 

• Mostrar sub-campos (11:32:07) mas introduzir 
so os valores (113207) 

• Fornecer valores por omissao 



onarconta | Cont-a 


SI 


Entidade | L2345| 




Hon^n* | 1 23 |.|4 5 |EUR 


Saldo dispc 
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Nayegagao 



• Inicio: Colocar o cursor no Campo mais 
provavel 

• Agrupar Campos de modo consistente 
com movimentos por omissao, do cursor 

• Suportar movimentos entre Campos 
contiguos 

• Proteger areas inacessiveis 
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Gestao de Erros 


• Suportar a edigao dentro de cada 


Campo 


• Logo que seja detectado um erro 


colocar o cursor no Campo 


• Desenhar de modo destacado o 


Campo com erro 


• Fornecer realimentagao semantica e 


sintactica 
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Manipulacao P i recta 



O utilizador executa accoes directamente 
sobre objectos visiveis. 
Caractensticas : 

- Representagao visual dos objectos 
-Accoes fisicas ou botoes premidos em 

vez de linguagem de comandos 

- Operacoes incrementais reversiveis 
com apresentacao imediata dos 
resultados 
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Vantagens Manipulagao Directa 



• Faceis de aprender e relembrar 

• WYSIWYG (What You See Is What You Get) 

• Acessiveis a utilizadores novicos e experientes 

• Flexiveis e c/ accoes faceis de desfazer (undo) 

• Fornecem realimentagao visual e contextual 
constante 

• Exploram as capacidades humanas para usar 
pistas visuais 

• "A prova de erros" 
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Desvantagens Manip. Directa 



• Podem ser ineficientes para peritos 

• Nem sempre sao auto-explicativas 

• Diffcil de desenhar fcones e gestos 
facilmente reconhecfveis 

• Icones usam mais espago de ecra 
que palavras 

• Nao suportam operagoes repetitivas 
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Exemplo: 


Video Jogos 
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Exemplo: Tampo da Secretaria 

- a o ■■■- x* i,a -j-"' ' ta 
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Exemplo: Apagar Ficheiro 





I ST* 6 "* 


1 €1 <fl 3 1 H2 


^W^—PW- ,Co Llri ,,» 


lAddtoZip" 
.c3Sddtom,file. fl p 

I^Iu aMdE-Hdlmyn^u 


2]Rep ,t 

^Visual Debugger 

2:™eb" 

§>nt s =nnPm:e^- fi -™i.dnr 


*QdTo . 


r*™ 


Q~te Shortcut 


flose 






Deetes the selectee, tens. 



rm myf ile . txt 



Manipulacao Directa 
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Novos paradigmas 



• Computagao ubfqua 

• Pervasive computing (smart devices) 

• Wearable Computing (computadores de vestir) 

• Tangible User Interfaces 

• Augmented reality 

• Attentive environments 

• Transparent computing 
- E muitos mais.... 
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I/O Brush 



The World as the Palette 




http://web.media.mit.edu/~kimiko/iobrush/ 
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Triangles 



• Criagao de narrativas usando 
triangulos 

• Interface tangfvel 





pnoto: 

Webb Cftappelt 



http://tangible.media.mit.edu/projects/triangles/ 
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BlobMaker - Interacgao Caligrafica 

a sc . Dt/Dr oiects.Dhp 



j*0^?©*" ~ 



O Sistema Quill 



• Pesquisa de documentos usando narrativas 

• http://narrative.shorturl.com/ 



a B " "i 
till 



si 
use 



sm 
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S ketch AR 

Virtual Taping 
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Laser Interactio n 

• Interaccao usando laser em ecras grandes 




V.2 - Estilos de Interaccao 



BloNo - Bloco de Notas p/ Cegos 
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Resumo 

• Tipos de dialogo 

-Menus, Formularios, LC e MD 
- Principals caracteristicas, vantagens e 
desvantagens 

• Princfpios de navegagao 
-Menus = WWW 

• Novos paradigmas de interacgao 
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Proxima Aula 



• Avaliacao com utilizadores 

• Local de avaliacao 

- Laboratories ou local de trabalho 

• Metodos de Avaliacao 

- Observacao 

- Interrogacao 

- Monitorizacao fisiologica 

• Ler: 

- HCI, Cap. 9, Alan Dix 

- Interaction Design, Cap. 11-14, J. Preece 



- Estilos de Interacgao 



